<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>summernote-demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
    <link th:href="@{/css/bootstrap.min.css}" href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link th:href="@{/css/summernote.css}" href="/css/summernote.css" rel="stylesheet" type="text/css" />
    <style>
        .container {
            position: absolute;
            left: 10%;
            right: 10%;
            top: 10%;
            bottom: 10%;
        }

        .custom-toolbar {
            padding: 5px;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>jQuery Custom Event Sample</h1>
    <div class="summernote">
        <article class="markdown-body js-file js-task-list-container is-task-list-enabled" data-task-list-update-url="https://gist.github.com/easylogic/95d2dbe03ce500bd0ae1/file/gistfile1.md">

            <h1>
                <a name="user-content-how-to-set-custom-event" class="anchor" href="#how-to-set-custom-event" rel="noreferrer"><span class="octicon octicon-link"></span></a>How to set custom event</h1>

            <h2>
                <a name="user-content-current-style-1" class="anchor" href="#current-style-1" rel="noreferrer"><span class="octicon octicon-link"></span></a>current style</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).summernote({
  <span class="pl-en">onfocus</span> : <span class="pl-st">function</span>(<span class="pl-vpf">e</span>) {
    <span class="pl-c">// to do something</span>
  }
});</pre></div>

            <h2>
                <a name="user-content-jquery-plugin-style" class="anchor" href="#jquery-plugin-style" rel="noreferrer"><span class="octicon octicon-link"></span></a>jquery style</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.focus<span class="pl-pds">"</span></span>, <span class="pl-st">function</span>(<span class="pl-vpf">e</span>) {
  <span class="pl-c">// to do something</span>
});</pre></div>

            <h1>
                <a name="user-content-event-list" class="anchor" href="#event-list" rel="noreferrer"><span class="octicon octicon-link"></span></a>Event List</h1>

            <h2>
                <a name="user-content-oninit" class="anchor" href="#oninit" rel="noreferrer"><span class="octicon octicon-link"></span></a>oninit</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.init<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onfocus" class="anchor" href="#onfocus" rel="noreferrer"><span class="octicon octicon-link"></span></a>onfocus</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.focus<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onenter" class="anchor" href="#onenter" rel="noreferrer"><span class="octicon octicon-link"></span></a>onenter</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.enter<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onblur" class="anchor" href="#onblur" rel="noreferrer"><span class="octicon octicon-link"></span></a>onblur</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.blur<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onkeyup" class="anchor" href="#onkeyup" rel="noreferrer"><span class="octicon octicon-link"></span></a>onkeyup</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.keyup<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onkeydown" class="anchor" href="#onkeydown" rel="noreferrer"><span class="octicon octicon-link"></span></a>onkeydown</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.keydown<span class="pl-pds">"</span></span>, ...);</pre></div>

            <h2>
                <a name="user-content-onchange" class="anchor" href="#onchange" rel="noreferrer"><span class="octicon octicon-link"></span></a>onChange</h2>

            <div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.change<span class="pl-pds">"</span></span>, ...);</pre></div>

        </article>


    </div>
</div>
</body>
<script th:src="@{/js/jquery-1.11.3.js}" src="/js/jquery-1.11.3.js" type="text/jscript" />
<script th:src="@{/js/bootstrap.min.js}" src="/js/bootstrap.min.js" type="text/jscript" />
<script th:src="@{/js/summernote.min.js}" src="/js/summernote.min.js" type="text/jscript" />
<script type="text/javascript">
    $(function() {
        $('.summernote').on('summernote.init', function() {
            console.log('summernote initialize!')
        }).on('summernote.change', function() {
            console.log(' changed content ')
        }).on('summernote.keyup', function(event) {
            console.log('you can use keyboard event', event);
        }).on('summernote.enter', function(event) {
            console.log('check enter key ');
        }).summernote({
            height: 300,
            callbacks: {
                onImageUpload: function(files, editor, welEditable) {
                    console.log("in onImageUpload-->",files);
                    for (var i = files.length - 1; i >= 0; i--) {
                        sendFile(files[i], this);
                    }
                }
            }});

//        .on('summernote.image.upload', function(we, files) {
//            console.log("in onImageUpload-->",files);
//            for (var i = files.length - 1; i >= 0; i--) {
//                sendFile(files[i], this);
//            }
//            $summernote.summernote('insertNode', imgNode);
//        })
        //upload image in description
//        $('.summernote').summernote({
//            height: 300,
//            callbacks: {
//                onImageUpload: function(files, editor, welEditable) {
//                    console.log("in onImageUpload-->",files);
//                    for (var i = files.length - 1; i >= 0; i--) {
//                        sendFile(files[i], this);
//                    }
//                }
//            }});

    });
    //create record for attachment
    function sendFile(file, el) {
        data = new FormData();
        data.append("file", file); // 表单名称
        console.log("in sendFile--->");
        $.ajax({
            type: "POST",
            url: "/vote/file/image",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                // 这里可能要根据你的服务端返回的上传结果做一些修改哦
                console.log("response",response);
                $(el).summernote('editor.insertImage', response.url, response.filename);
            },
            error : function(error) {
                console.log("error",error);
                alert('图片上传失败');
            },
            complete : function(response) {
                console.log("sendFile complete");
            }
        });
    }
</script>
</html>